<template>
  <!-- 
需求分析:
   1. 头部组件封装
   2. 轮播图功能
   3. 网格列表
   4. 秒杀列表功能
   5. 商品列表
      5.1 上拉加载
      5.2 下拉刷新 -->

  <!-- 头部 -->

  <HomeHeader></HomeHeader>

  <!--  轮播图 -->

  <van-pull-refresh
    v-model="loading"
    @refresh="onRefresh"
    success-text="刷新成功"
  >
    <!-- <div class="banner" v-if="bannerList.length > 0">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="{ bannerid, img, alt } in bannerList"
          :key="bannerid"
        >
          <img :src="img" :alt="alt" />
        </van-swipe-item>
      </van-swipe>
    </div> -->

    <!-- 菜单栏 -->
    <!-- <div class="nav"> -->
    <!-- @click="handleGriditemClick(item.id)" -->
    <!-- <van-grid column-num="5" icon-size="35" clickable :border="false">
        <van-grid-item
          class="temp"
          v-for="item in gridList"
          :key="item.id"
          :icon="item.url"
          :text="item.text"
        />
      </van-grid>
    </div> -->

    <!--  秒杀 -->

    <!-- <div class="miaosha"> -->
    <!-- 秒杀头部时间显示 -->
    <!-- <div class="miaosha-header">
        <h3 class="miaosha-title">京东秒杀</h3>
        <div class="miaosha-hour">{{ showHour }}点场</div>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{
              timeData.hours < 10 ? '0' + timeData.hours : timeData.hours
            }}</span>
            <span class="colon">:</span>
            <span class="block">{{
              timeData.minutes < 10 ? '0' + timeData.minutes : timeData.minutes
            }}</span>
            <span class="colon">:</span>
            <span class="block">{{
              timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds
            }}</span>
          </template>
        </van-count-down>
      </div> -->

    <!-- 秒杀商品列表 -->

    <!-- 秒杀推荐商品 -->
    <!-- <div class="miaosha-content">
        <div class="content-item" v-for="item of miaoshaList" :key="item.proid">
          <img :src="item.img1" alt="" />
          <p class="price">${{ item.originprice }}</p>
        </div>
      </div>
    </div> -->
    <!-- 商品列表 -->

    <van-list
      v-model:loading="onloadLoading"
      :finished="finished"
      finished-text="没有更多了"
      offset="50"
      @load="onLoad"
    >
      <GoodsList :goodsList="goodsListDataPro"></GoodsList>
    </van-list>
  </van-pull-refresh>
  <!--  底部组件 -->
  <HomeFooter></HomeFooter>
</template>

<script setup lang="ts">
import HomeHeader from '@/components/HomeHeader.vue'
import HomeFooter from '@/components/HomeFooter.vue'
import GoodsList from '@/components/GoodsList.vue'

import { onMounted, ref } from 'vue'

import {
  getGridList,
  getBanner,
  getSecondKillGoods,
  getGoodsList,
  getGoodsListPro,
} from '@/apis/home'

//  轮播图
//  九宫格

const bannerList = ref([])

const gridList = ref([])

const initData = async () => {
  let res1 = await getGridList()
  let res2 = await getBanner()
  let res3 = await getSecondKillGoods()

  // console.log(res1)
  // console.log(res2)

  // console.log(res3)

  bannerList.value = res2.data
  gridList.value = res1
}

onMounted(() => {
  // initData()
})

//  秒杀

// 秒杀时间
let time = ref(0) // 距离下一场秒杀剩余的毫秒数
let showHour = ref(8) // 页面要展示的时间场次
let timerId = null // 定时器编号

//1  倒计时的时间    比如 8 点秒杀  7点  59分
onMounted(() => {
  setInterval(() => {
    // 获取当前时间  new  Date ()
    let now = new Date()
    let year = now.getFullYear()
    let month = now.getMonth() + 1
    let days = now.getDate()
    let hours = now.getHours()

    // console.log(hours) //9

    // 定义 开始秒杀的时间

    let nextHours = hours % 2 == 1 ? hours + 1 : hours + 2 // 每隔2小时秒杀一次

    let currentTime = new Date() //当前时间

    let miaosha = new Date(year, month, days, nextHours, 0, 0) // 秒杀的时间
    let miaoshaHours = miaosha.getHours()

    showHour.value = miaoshaHours // 显示 整点秒杀的时间

    //  倒计时 显示   需要我们传递的是毫秒数 (秒杀毫秒数- 当前时间毫秒数)
    time.value = miaosha.getTime() - currentTime.getTime()
  }, 1000)
})

//秒杀商品列表展示
const miaoshaList = ref([])

onMounted(() => {
  getGoodsList().then((res) => {
    // console.log(res.data)
    miaoshaList.value = res.data
  })
})

// 商品列表
const count = ref(1)

const goodsListDataPro = ref([])
onMounted(() => {
  getGoodsListPro(count.value).then((res) => {
    // console.log('res', res.data)

    goodsListDataPro.value = res.data
  })
})

// 下拉刷新
const loading = ref(false) // false 刷新完成   正在刷出的时候true
const onRefresh = () => {
  // 1  加载loading
  // 2  重置所有的数据

  loading.value = true // 正在刷新

  let p1 = getBanner()
  let p2 = getSecondKillGoods()
  count.value = 1 // 重置 到第一页

  let p3 = getGoodsListPro(count.value)

  Promise.all([p1, p2, p3]).then((arrData) => {
    console.log('arrData', arrData)

    bannerList.value = arrData[0].data
    miaoshaList.value = arrData[1].data
    goodsListDataPro.value = arrData[2].data
    //  完成后
    loading.value = false
    onloadLoading.value = false
    count.value = 1
  })
}

// 上拉加载

const onloadLoading = ref(false) // 控制加载 状态 (是否开启加载)
const finished = ref(false) // 加载是否完成

const onLoad = () => {
  onloadLoading.value = true // 开启 上拉加载

  // 异步更新数据

  count.value++ // 总页数 total

  getGoodsListPro(count.value).then((res) => {
    console.log('res', res.data)

    goodsListDataPro.value = [...goodsListDataPro.value, ...res.data]
  })

  // 加载状态结束
  onloadLoading.value = false

  // 数据全部加载完成
  if (count.value >= 4) {
    finished.value = true
  }
}
</script>

<style scoped lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.banner {
  box-sizing: border-box;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    background-color: #39a9ed;
    img {
      display: block;
      width: 100%;
    }
  }
}

.nav {
  :deep(.van-grid-item__content) {
    background: transparent;
    padding: 16px 7px;
  }
}

.miaosha {
  margin: 10px;
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  padding: 5px;
  .miaosha-header {
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    .miaosha-title {
      float: left;
      font-size: 16px;
      font-weight: 900;
      text-align: center;
      padding-left: 5px;
      padding-right: 10px;
    }
    .miaosha-hour {
      float: left;
      color: #ee0a24;
      font-weight: bold;
      height: 100%;
      margin-right: 10px;
    }
    .van-count-down {
      float: left;
      margin-top: 10px;
      .colon {
        display: inline-block;
        margin: 0 4px;
        color: #ee0a24;
      }
      .block {
        display: inline-block;
        width: 22px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #ee0a24;
      }
    }
  }
  .miaosha-content {
    display: flex;
    .content-item {
      flex: 1;
      img {
        width: 80%;
        height: 15vw;
        margin: 5px auto;
      }
      .price {
        font-size: 0.8em;
        font-weight: bold;
        color: #f2270c;
        text-align: center;
      }
    }
  }
}
</style>
